<template>
  <div class="pages border-default">
    <el-pagination background
                   @size-change="sizeChange"
                   @current-change = 'currentChange'
                   :current-page="currentPage"
                   :page-sizes="pageSizes"
                   :page-size="pageSize"
                   :layout="pageLayout"
                   :total="pageTotal">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: "jxf-pagination",
    props: {
      pageTotal: {
        type: Number
      },
      pageSize: {
        type: Number,
        default: 10
      },
      pageSizes: {
        type: Array,
        default: () =>{
          return [5, 10, 20, 50, 100, 200, 500]
        }
      },
      currentPage: {
        type: Number,
        default: 1
      },
      pageLayout: {
        type: String,
        default: "total, sizes, prev, pager, next, jumper"
      }
    },
    methods:{
      currentChange(pageNo){
        this.$emit("currentPageChange",pageNo)
      },
      sizeChange(pageSize){
        this.$emit("pageSizeChange",pageSize)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pages{
    display: flex;
    justify-content: flex-end;
    padding: 10px;
    border: 1px solid #f3f3f3;
    margin: 10px 0 20px;
    background-color: #fff;
  }
</style>
